<template>
	<view>

		<view class="rank-shoplist">
			<view class="van-list">
				<u-empty v-if="itemList==0" mode="save" icon="http://cdn.uviewui.com/uview/empty/data.png"/>
				<view class="g-shop-list g-df-vc" v-for="(item, index) in itemList" :key="index" :data-id="index"
					>
					<view class="shop-img" @click="xdlActivity(item)">
						<image class="sdl-image" :src="item.mainPic"> </image>

					</view>

					<view class="shop-box">
						<view class="shop-padding">
							<view
								style="width:100%;border-box;display: flex;align-items: center;-webkit-box-align: center;">
								<view style="width:50%;">
									<text class="sdl-text"><text class="G-font g-gps"></text>{{item.city}}</text>
								</view>
								<view @click="unsave(item)"
									style="width:50%;display: flex;justify-content: flex-end;align-items: center;-webkit-box-align: center;">
									<text class="G-font g-save xdl-save"></text>
									<text style="font-size: 20rpx;color: #909399;">已收藏</text>
								</view>

							</view>
							<view @click="xdlActivity(item)" class="act-title">{{item.title}}</view>
							<view @click="xdlActivity(item)" class="act-content">
								{{item.actName}}
							</view>
						</view>
						<view class="shop-padding" style="margin-left: 10rpx;">
							<!--券专区-->
							<view>
								<view class="coupon-box g-df-vc">
									<view style="font-family: PingFang SC;color:#ac4040;">
										<text>¥</text>
										<text style="font-size: 32rpx;margin:0 8rpx;">{{item.price}}</text>
										<text style="color: #909399;font-weight: 400;">起</text>
									</view>

								</view>
								<view class="sell g-text-ellipsis">
									<view style="display: flex;align-items: center;width:50%;">
										<text class="G-font g-mall"></text>
										<text>{{item.shopName}}</text>
									</view>
									<view style="display: flex;justify-content:flex-end;width: 50%;">
										<text>{{item.cTime}}</text>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>


			</view>
		</view>

	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	export default {
		data() {
			return {
				itemList: [],
				indexArr: '',
				valueArr: '',
				defaultSelected: null
			}
		},
		onLoad() {
			this.loadActSave();
		},
		methods: {
			unsave(v){
				uni.showLoading({title: '加载中...'});
				this.$Request.get(this.$api.activity.unsave, {
					id: v.id
				}).then(res => {
					if (res.code === 20000) {
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '已取消收藏'
						});
						this.itemList=[];
						this.loadActSave();
						uni.hideLoading();
						
					}
				})
			},
			loadActSave() {
				const params = {
					pageNo: "1",
					pageSize: "10"
				}
				this.$Request.post(this.$api.save.actSaveList, params).then(res => {
					if (res.code === 20000 && res.data != null) {
						this.itemList = [...this.itemList, ...res.data.records];
						console.log('itemList>>>', this.itemList)
					}
				})

			},
			change(index) {
				uni.$u.toast(`点击了第${index}项`);
			},
			xdlActivity(v) {
				utils.removeCache("actInfo");
				utils.setCache('actInfo', v);
				console.log(v)
				uni.navigateTo({
					url: '/pages/activity/components/detail?id='+v.id
				})
			},
			//接收菜单结果
			confirm(e) {
				this.indexArr = e.index;
				this.valueArr = e.value;

			}
		}
	}
</script>

<style lang="scss">
	body {
		margin: 0;
		padding: 0;
		background: #F5F5F4 !important;
	}

	.page,
	uni-page-wrapper,
	page {
		background: #F5F5F4 !important;
		font-family: PingFang SC;
	}

	.tabs {
		padding: 0 0 10rpx;
	}


	.xdl-save {
		color: $xdl-color-primary;
		font-size: 25rpx;
		padding-right: 10rpx;
	}

	.rank-shoplist {
		margin-top: 30upx;

		.van-list {
			display: flex;
			flex-wrap: wrap;
			-webkit-box-align: end;
			align-items: flex-end;
			-webkit-box-pack: center;
			justify-content: center;
			padding: 0 20rpx;

			.g-shop-list {
				width: 100%;
				margin: 0 auto;
				margin-top: 10rpx;
				box-sizing: border-box;
				//padding: 0.1rem 0.3125rem;
				font-family: miui;
				z-index: 1;
			}
		}
	}

	.g-df-vc {
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}

	.coupon-box {
		color: #fe355d;
		font-weight: bold;
		font-size: 0.625rem;
	}

	.coupon {
		min-width: 80upx;
		width: 100upx;
		height: 40upx;
		background: linear-gradient(-90deg, #FE305C, #FF856F);
		border-radius: 10upx;
		font-weight: 400;
		padding: 0 8upx 0 2upx;
		box-sizing: border-box;
		display: inline-flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		color: #fff;
		margin-left: 0.375rem;
		font-size: 0.625rem;
	}

	.shop-img {
		width: 8rem;
		height: 8rem;
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		border-radius: 0.3125rem;
		position: relative;
		margin: 0;
		padding: 0;

		.sdl-image {
			width: 95%;
			height: 95%;
			border-radius: 0.3125rem;
			border: none;
			vertical-align: middle;
		}
	}

	.btn-prev {
		margin-top: -0.25rem;
		color: #8d490b;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		text-align: center;
		font-size: 0.625rem;
	}

	.btn-next {
		margin-top: -0.25rem;
		color: #fff;
		width: 3.75rem;
		text-align: center;
		font-size: 0.75rem;
	}

	.g-df-c {
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.top-sort {
		width: 2.125rem;
		height: 2.53125rem;
		background: #ccc;
		position: absolute;
		top: -0.3125rem;
		left: -0.375rem;
		//background: url(../../static/img/mainstay/top.png);
		background-size: contain;
		z-index: 2;
	}

	.sell {
		//font-size: 0.625rem;
		color: #000;
		margin-top: 5rpx;
		position: relative;
		display: flex;
		font-family: PingFang SC;
		font-size: 18rpx;
		font-weight: 400;
	}

	.oriprice {
		text-decoration: line-through;
		color: #999;
		margin-top: 0.1875rem;
		font-weight: 500;
		margin: 0.3125rem 0;
	}

	.g-text-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shop-box {
		height: 240rpx;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		width: 50%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 0.3125rem 0 0.1875rem;
		box-sizing: border-box;
		margin-left: 10rpx;
		border-bottom: 1px solid #e8e8e8;
		;

		.shop-padding {
			padding-left: 6upx;
			width: 100%;
			box-sizing: border-box;

			.sdl-text {
				font-family: PingFang SC;
				color: #333;
				font-size: 28rpx;
				font-weight: bold;
				width: 100%;
				box-sizing: border-box;
				padding-left: 0.1875rem;
				display: inline-block;
				line-height: 0.90625rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}



	}

	.btn-gro {
		width: 12.5rem;
		height: 2.28125rem;
		border-radius: 0.3125rem;
		background-size: 100%;
		margin-left: -0.25rem;
		font-size: 0.625rem;
		font-weight: 500;
		padding: 0 0.3125rem;
		box-sizing: border-box;
	}

	.selectTop {
		text-align: center;
		color: #fff;
		border-bottom: 0.0625rem solid rgba(255, 255, 255, .3);
		padding-bottom: 0.625rem;
	}

	.tabs {
		border-bottom: 0.0625rem solid rgba(255, 255, 255, .3);
	}

	.header {
		//max-width: 23.4375rem;
		width: 100%;
		height: 5.9375rem;
		z-index: 100;
		position: relative;
		padding-top: 0.3125rem;

		.rank-head {
			width: 100%;
			background-repeat: repeat;
			background-size: 100% 100%;

		}
	}



	.stick-bg {
		background: linear-gradient(90deg, rgba(255, 154, 12, 0.9), rgba(253, 36, 39, 0.9));
		position: absolute;
		width: 100%;
		// max-width: 23.4375rem;
		height: 12.5rem;
		top: 0;
		-webkit-transition: background .3s;
		transition: background .3s;

	}


	.act-title {
		margin-top: 8rpx;
		margin-left: 12rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #767a82;
		font-family: PingFang SC;
	}

	.act-content {
		margin-left: 12rpx;
		font-size: 24rpx;
		color: #909399;
		font-family: PingFang SC;

		max-height: 40px;
		font-weight: bold;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
</style>
